<template>
  <div
    v-if="isInited"
    class="echart-series-markArea visualComp"
  >
    <table class="markAreas_table">
      <tr>
        <th style="width:30px">{{ $demoi18n('word.serialNumber') }}</th>
        <th style="width:80px">{{ $demoi18n('echart.th.series') }}</th>
        <th style="width:150px">{{ $demoi18n('echart.th.referenceValue') }}</th>
        <th style="width:170px">{{ $demoi18n('echart.th.color') }}</th>
        <th style="width:220px">{{ $demoi18n('echart.th.description') }}</th>
        <th style="width:60px">{{ $demoi18n('echart.th.operation') }}</th>
      </tr>
      <tr
        v-for="(n, i) in data"
        :key="i"
      >
        <td>{{ i + 1 }}</td>
        <td>
          <ValueInputer
            v-model:value="n[0]._serieName"
            :enum-values="serieNames"
            :rules="genRulesByKey('echart.series.markArea.data.[x].0._serieName')"
          />
        </td>
        <td>
          <table class="ref_table">
            <tr>
              <th>{{ $demoi18n('echart.markArea.upperReference') }}</th>
              <td>
                <ValueInputer
                  v-model:value="n[0].yAxis"
                  :enum-values="getMarkAreaTypes('y')"
                  :rules="genRulesByKey('echart.series.markArea.data.[x].0.yAxis')"
                />
              </td>
            </tr>
            <tr>
              <th>{{ $demoi18n('echart.markArea.lowerReference') }}</th>
              <td>
                <ValueInputer
                  v-model:value="n[1].yAxis"
                  :enum-values="getMarkAreaTypes('y')"
                  :rules="genRulesByKey('echart.series.markArea.data.[x].1.yAxis')"
                />
              </td>
            </tr>
            <tr>
              <th>{{ $demoi18n('echart.markArea.leftReference') }}</th>
              <td>
                <ValueInputer
                  v-model:value="n[0].xAxis"
                  :enum-values="getMarkAreaTypes('x')"
                  :rules="genRulesByKey('echart.series.markArea.data.[x].0.xAxis')"
                />
              </td>
            </tr>
            <tr>
              <th>{{ $demoi18n('echart.markArea.rightReference') }}</th>
              <td>
                <ValueInputer
                  v-model:value="n[1].xAxis"
                  :enum-values="getMarkAreaTypes('x')"
                  :rules="genRulesByKey('echart.series.markArea.data.[x].1.xAxis')"
                />
              </td>
            </tr>
          </table>
        </td>
        <td>
          <div class="color_picker_wrap">
            <ColorPicker
              v-model:value="n[0].itemStyle.color"
              show-alpha
              @change="colorChange(n)"
            />
          </div>
        </td>
        <td>
          <div class="name">
            <el-switch
              v-model="n[0].label.show"
              size="default"
            ></el-switch>
            <ValueInputer
              v-if="n[0].label.show"
              v-model:value="n[0].name"
              :rules="genRulesByKey('echart.series.markArea.data.[x].0.name')"
            />
            <ValueInputer
              v-if="n[0].label.show"
              v-model:value="n[0].label.position"
              value-type="List"
              :enum-values="markAreaNamePositions"
              @change="positionChange(n)"
            />
          </div>
        </td>
        <td>
          <el-button
            icon="Delete"
            :link="true"
            type="primary"
            @click="delMarkArea(n)"
          ></el-button>
        </td>
      </tr>
    </table>

    <div class="add_line">
      <el-button
        icon="Plus"
        size="default"
        @click="addMarkArea()"
      >
        {{ $demoi18n('btn.add') }}
      </el-button>
    </div>
  </div>
</template>
<script>
import { markAreaTypes, markAreaNamePositions } from '@/components/common/echart/form-item-options.js';
import ValueInputer from '@/components/common/value-inputer/value-inputer.vue';
import ColorPicker from '@/components/common/color-picker/color-picker.vue';
import Range from '@/components/common/range/range.vue';
import echartUtil from '@/components/common/echart/echart-util.js';
import echartDefault from '@/components/common/echart/echart-property-default.js';
import EchartCommonMixin from '@/components/common/echart/mixins/echart-common-mixin.js';

const dfMarkArea = echartDefault.echart.series.markArea;

export default {
  components: { ValueInputer, ColorPicker, Range },
  mixins: [EchartCommonMixin],
  props: {
    form: Object,
  },
  data() {
    return {
      markAreaTypes,
      markAreaNamePositions,
      data: JSON.parse(JSON.stringify(dfMarkArea.data)),
      isInited: false,
    };
  },
  computed: {},
  watch: {},
  created() {
    this.initMarkArea();
    this.isInited = true;
  },
  methods: {
    initMarkArea() {
      echartUtil.registerVar('echart.series.markArea.data', this.form, this, []);
      this.data = this.form.echart.series.markArea.data;
    },
    addMarkArea() {
      const areaItem = JSON.parse(JSON.stringify(dfMarkArea.data[0]));
      this.data.push(areaItem);
    },
    delMarkArea(n) {
      const index = this.data.indexOf(n);
      if (index > -1) {
        this.data.splice(index, 1);
      }
    },
    positionChange(n) {
      n[0].emphasis.label.position = n[0].label.position;
    },
    colorChange(n) {
      n[0].label.color = n[0].itemStyle.color;
    },
    getMarkAreaTypes(xy) {
      if (xy === 'x' && this.form.echart.xAxis.type === 'time') {
        return [];
      }
      if (xy === 'y' && this.form.echart.yAxis.type === 'time') {
        return [];
      }
      return markAreaTypes;
    },
  },
};
</script>
<style lang="less" scoped>
.echart-series-markArea {
  .markAreas_table {
    width: 100%;
    margin-top: 10px;
    border-collapse: collapse;
    th,
    td {
      text-align: center;
      font-weight: normal;
      border: 1px solid #ccc;
      padding: 0 5px;
      font-size: 12px;
    }
    th {
      padding: 5px;
      word-break: keep-all;
    }
    .ref_table {
      width: 100%;
      th,
      td {
        border: none;
      }
      th {
        width: 50px;
      }
    }
    .color_picker_wrap {
      display: flex;
      justify-content: center;
    }
    .name {
      display: flex;
      align-items: center;
      justify-content: center;
      > * {
        margin-left: 5px;
        &:first-child {
          margin-left: 0;
        }
      }
    }
  }
  .add_line {
    margin-top: 10px;
  }
}
</style>
